<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶商城 路由</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!-- 首页 -->
		<div id="box">
			<div style="height: 150px;margin: 20px 250px 0px;">
				<div style="float: left;">
					<img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9mNzQxMjQwMWIwNmNmN2NiYjg5ODkxMGMxMTZjNmU3Ni05MC53ZWJw.webp">
				</div>
				<div style="float: right;">
					<a v-for="i in arr" :href="'#'+ i.href" style="float: left;margin: 0px 20px;line-height: 100px;">
						{{i.title}}
					</a>
				</div>
			</div>
			<div style="height: 500px;">
				<router-view></router-view>
			</div>
		</div>
		<!-- 茶详情 -->
		<template id="no3">
			<div style="min-height:400px;background-color: #ccc;text-align: center;padding: 0px 400px;">
				<div v-for="i in tea_arr" style="text-align: center;">
					<a :href="'#/no3'+i.url" style="color:white;font-size: 15px;float: left;margin: 10px 20px;">{{i.name}}</a>
				</div>
				<div>
					<router-view></router-view>
				</div>
			</div>
		</template>
	</body>
	<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//tea
		var no3={
			template:'#no3',
			data(){
				return {
					tea_arr:[
						{url:'/greentea',name:'绿茶'},
						{url:'/redtea',name:'红茶'},
						{url:'/yellowtea',name:'黄茶'},
						{url:'/blacktea',name:'黑茶'},
						{url:'/whiteTea',name:'白茶'},
						
					]
				}
			}
		}
		//声明组件模板
		var no1={template:`<div style="width: 100%;height: 500px;">
				<img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS81OTE2NjgzNjA1NzgxOWEwNWM0ZmY2ZDk1YWMzNTQ4Yi05MC53ZWJw.webp" alt="" style="width: 100%;height: 100%;">
			</div>`}
		var no2={template:`<div style="text-align: center;">
				<img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS80OWFlMzhhODY3ZWY3NWE0MDczZGY3NGJhMWY5OGMyNi05MC53ZWJw.webp
				" alt="">
				<h1 style="line-height: 50px;">春茶</h1>
				<h3 style="line-height: 50px;">饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。</h3>
			</div>`}
		var no4={template:`	<div style="width: 100%;">
				<img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS83M2ViODg1M2E2ZmQ1NmJhZGE3ZDhmMjg2M2Q5YzU4OC05MC53ZWJw.webp" alt="">
				<h2 style="text-align: center;line-height: 80px;">种植基地</h2>
				<p style="padding: 0px 100px;text-align: center;">公司拥有完整、科学、质量管理体系，通过ISO14001，ISO22000国际质量体系认 证，有机产品认证，拥有大量先进、专业的生产设备和检测仪器，秉承“顾客至上，锐意进取”的经营理念，坚持“客户第一”的原则为广大客户提供优质的服务。</p>
			</div>`}	
		var no5={template:`<div style="padding: 0px 200px;width: 700px;height: 300px;">
				<div style="float: left;">
					<div v-for='i in arr' style="width: 200px;height: 50px;background: #ccc;text-align: center;line-height: 50px;">
						<a :href="'#/no5'+i.url">{{i.name}}</a>
					</div>
				</div>
				<div>
					<router-view></router-view>
				</div>
			</div>`,data(){
				return{
					arr:[
						{url:'/allnews',name:'全部新闻'},
						{url:'/teanews',name:'新茶动态'},
						{url:'/cpnews',name:'产品新闻'},
					]
				}
			}}
		var no6={template:`<div>
				<img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS81NjM0YjlkMWViYWQ3MGRjYWVmYzU0MzQxYTRjM2RhYS05MC53ZWJw.webp" alt="">
				<p style="padding: 0px 200px;text-align: center;line-height: 30px;">
中国历史上有很长的饮茶纪录，已经无法确切地查明到底是在什么年代了，但是大致的时代是有说法的。并且也可以找到证据显示，确实在世界上的很多地方饮茶的习惯是从中国传过去的。</p>
			</div>`}
		//配置routes
		var routes = [
			{path:'/',redirect:'/no1'},
			{path:'/no1',name:'no1',component:no1},
			{path:'/no2',name:'no2',component:no2},
			{path:'/no3',name:'no3',component:no3,
				children:[
					{
						path: 'greenTea',
						name: 'green',
						alias: '/',
						component: {
							template: `<div style="width:150px;min-height:200px"><img style="height:200px;margin-bottom:15px;width:100%" src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9hNjk3Y2NmZTE3MjA1ODViNzAzYTY5OTZlZjc3ZTg2YS00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"></img><p>西湖龙井特级</p></div>`
						}
					},
					{
						path: 'redTea',
						name: 'red',
						component: {
							template: `<div style="width:150px;min-height:200px"><img style="height:200px;margin-bottom:15px;width:100%" src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9jM2NiZWRlYTg3YmY3NmM5NTI4N2NlZTJhZDgyODIzYy00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"></img><p>祁门红茶</p></div>`
						}
					},
					{
						path: 'yellowTea',
						name: 'yellow',
						component: {
							template: `<div style="width:150px;min-height:200px"><img style="height:200px;margin-bottom:15px;width:100%" src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"></img><p>霍山黄芽蒙洱银针</p></div>`
						}
					},
					{
						path: 'blackTea',
						name: 'black',
						component: {
							template: `<div style="width:150px;min-height:200px"><img style="height:200px;margin-bottom:15px;width:100%" src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"></img><p>云南普洱茶</p></div>`
						}
					},
					{
						path: 'whiteTea',
						name: 'white',
						component: {
							template: `<div style="width:150px;min-height:200px"><img style="height:200px;margin-bottom:15px;width:100%" src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"></img><p>白牡丹</p></div>`
						}
					},
				]
			},
			{path:'/no4',name:'no4',component:no4},
			{path:'/no5',name:'no5',component:no5,
				children:[
					{path:'allnews',
					name:'allnews',
					alias:'/',
					component:{
						template:`<div style="float: right;">
					<div style="width: 450px;height: 200px;background: #ccc;text-align: center;line-height: 200px;">
						全部新闻
					</div>
				</div>`
					}},
					{path:'teanews',
						name:'teanews',
						component:{
							template:`<div style="float: right;">
						<div style="width: 450px;height: 200px;background: #ccc;text-align: center;line-height: 200px;">
							新茶动态
						</div>
					</div>`
					}},
					{path:'cpnews',
						name:'cpnews',
						component:{
							template:`<div style="float: right;">
						<div style="width: 450px;height: 200px;background: #ccc;text-align: center;line-height: 200px;">
							产品新闻
						</div>
					</div>`
					}},
				]
			},
			{path:'/no6',name:'no6',component:no6}
		]
		//配置router实例
		var router = new VueRouter({
			routes
		})
		new Vue({
			el:'#box',
			router,
			data:{
				arr:[
					{href:'/no1',title:'首页'},
					{href:'/no2',title:'关于'},
					{href:'/no3',title:'茶叶'},
					{href:'/no4',title:'基地'},
					{href:'/no5',title:'新闻'},
					{href:'/no6',title:'联系'},
				]
			}
		})
	</script>
</html>
